<template>
  <div class="addFormBox">
    <!-- 循环data中定义的数组 -->
    <div v-for="(item,index) in formLabelAlign" :key="index">
      <div class="formOuterBox">
        <div class="formCotantBox">
          <h3>题目 {{index+1}}</h3>
          <!-- 表单内容 -->
          <el-form label-width="80px" :inline="true">
            <el-form-item label="题目" style="float: left">
              <el-input v-model="item.question"></el-input>
            </el-form-item>
            <div style="float:left;">
            <el-form-item label="选项A">
              <el-input v-model="item.optionA"></el-input>
            </el-form-item>
            <el-form-item label="选项B">
              <el-input v-model="item.optionB"></el-input>
            </el-form-item>
            <el-form-item label="选项C">
              <el-input v-model="item.optionC"></el-input>
            </el-form-item>
            <el-form-item label="选项D">
              <el-input v-model="item.optionD"></el-input>
            </el-form-item>
              <el-form-item label="答案" >
                      <el-select v-model="item.answer">
                        <el-option :label="A" :value="A"></el-option>
                        <el-option :label="B" :value="B"></el-option>
                        <el-option :label="C" :value="C"></el-option>
                        <el-option :label="D" :value="D"></el-option>
                      </el-select>
                    </el-form-item>
            </div>
          </el-form>
        </div>
        <!-- 操作按钮 -->
        <div style="float: left;">
          <el-button @click="addForm" type="success">添加题目</el-button>
          <el-button v-if="formLabelAlign.length > 1" @click="removeIdx(item, index)" type="danger">删除此条题目</el-button>
        </div>
      </div>
    </div>
    <el-button type="primary" @click="save">提交</el-button>
    <el-button type="primary" @click="se">返回</el-button>
  </div>
</template>

<script>
import {postRequest} from "@/utils/api";
import {Message} from "element-ui";

export default {
  name: "Addque",
  data(){
    return{
      A:'A',
      B:'B',
      C:'C',
      D:'D',

      formLabelAlign: [
        {
          question:'',
          optionA:'',
          optionB:'',
          optionC:'',
          optionD:'',
          answer:'',
        },
      ],
    }
  },
  methods:{
    se(){
      this.$router.push("/show")
    },
    addForm() {
      // 定义一个标识，通过标识判断是否能添加信息
      let statusType = true;
      this.formLabelAlign.forEach((item) => {
        if (
            item.question == "" ||
            item.optionA == "" ||
            item.optionB == "" ||
            item.optionC == "" ||
            item.optionD == "" ||
            item.answer == ""
        ) {
          this.$message({
            message: "请完善上面的题目再添加新题目",
            type: "warning",
          });
          statusType = false;
        }
      })
      if (statusType) {
        this.formLabelAlign.push({
          question:'',
          optionA:'',
          optionB:'',
          optionC:'',
          optionD:'',
          answer:'',
        });
      }
    },
    // 删除操作
    removeIdx(item, index) {
      this.formLabelAlign.splice(index, 1);
      this.$message({
        message: "删除成功",
        type: "success",
      });
    },
    save(){

      let statusType = true;
      this.formLabelAlign.forEach((item) => {
        if (
            item.question == "" ||
            item.optionA == "" ||
            item.optionB == "" ||
            item.optionC == "" ||
            item.optionD == "" ||
            item.answer == ""
        ) {
          this.$message({
            message: "请完善题目后提交",
            type: "warning",
          });
          statusType = false;
        }
      })
      if(statusType) {
        postRequest("/question/save", this.formLabelAlign).then(resp => {
          if (resp) {
            if (resp.data.flag) {
              Message.success(resp.data.message);
              this.formLabelAlign = {};
              this.$router.push("/show")
            } else {
              Message.error("新增失败");
            }
          }
        })
      }
    },
  },
};
</script>

<style scoped>
.addFormBox {
  padding-top: 20px;
  width: 80%;
  margin: 0 auto;
  height: 320px;
}
.formOuterBox {
  margin-bottom: 60px;
  padding: 30px 40px;
  background: white;
  border-radius: 30px;
  height: 200px;
}
h3 {
  margin: 0px 0px 20px 0px;
}
</style>